<template>
	<div>
		<div class="top">
			<div class="div_box">
				<span @click="goback" class="fl">
					<img src="../../../static/imges/ic_return@2x.png" />
				</span>
				<span class="top_title">
					选择项目
				</span>
				<div class="clear"></div>
			</div>
		</div>
		<!-- top -->
		<div class="content">
			<ul>
				<li v-for="(item,index) of project" :key="index">
					<p class="title" :style="{background:'url('+item.icon+') left center / 0.5rem no-repeat'}">{{item.name}}</p>
					<div class="project_con">
						<a v-for="con of item.datas" :key="con.id" :id="con.id" :class="{active:actives==con.id}" @click="activeBtn(con.id)">
							{{con.name}}
						</a>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import axios from 'axios'
	export default {
		name: 'project',
		data() {
			return {
				project: [],
				actives:""
			}
		},
		mounted() {
			this.getProject()
		},
		methods: {
			getProject() {
				axios.get('/api/project.json')
					.then(this.getProjectSuc)
					.catch(err => {
						console.log(err)
					})
			},
			getProjectSuc(res) {
				this.project = res.data.data
				console.log(this.project)
			},
			goback() {
				this.$router.go(-1)
			},
			// 项目的选中
			activeBtn(id){
				this.actives = id;
				this.$router.push({ name: 'Index', params: { project: id }})
			}
		
		},
	}
</script>

<style scoped="scoped">
	.div_box {
		padding: 0px;
	}

	.top {
		border-bottom: 1px solid #E5E5E5;
		padding: .26rem 0;
	}

	.top img {
		width: .5rem;
	}

	.top .top_title {
		width: calc(100% - .5rem);
		display: inline-block;
		font-size: .36rem;
	}

	.content {
		width: 100%;
	}

	.content ul li {
		padding: .3rem 4%;
		border-bottom: 2px solid #EEEEEE;
	}

	.content ul li p.title {
		text-align: left;
		font-size: .32rem;
		color: #333;
		padding-left: .58rem;
		line-height: .5rem;
	}

	.content ul li .project_con {
		width: 100%;
		text-align: left;
		margin-top: .15rem;
	}

	.content ul li .project_con a {
		display: inline-block;
		background: rgba(237, 241, 243, 1);
		border: 2px solid rgba(245, 245, 245, 1);
		box-shadow: 0px 3px 8px 0px rgba(36, 68, 88, 0.22);
		border-radius: 8px;
		color: #333;
		/* padding: .27rem .38rem; */
		margin: .15rem 2%;
		width: 28%;
		line-height: 0.8rem;
		overflow: hidden;
		height: .8rem;
		text-align: center;
	}
	
	.content ul li .project_con a.active{
		background: #0078D8;
		color: #fff;
	}
</style>
